<template>
    <div id="AsnDetailList">
        <v-tableTitle :btnConfig="btnConfig" :tableSelectData="selectData" @backList="backList"
                      @del="del" @newCreate="newCreate" @exportFill="exportFill" @poFill="newCreate"
                      @btnTableData="btnTableData"></v-tableTitle>
        <div class="detail">
            <v-navMenu
                    :detailNav="detailNav"
                    :menuData="menuData"
                    @setMentActive="setMentActive"
                    v-if="detailNav!=1"
            ></v-navMenu>
            <component :data="{detailData,argument,detailSelectData}" :is="currentComponent"></component>
        </div>
    </div>

</template>

<script>
    import tableTitle from "commons/TableTitle";
    import navMenu from "commons/NavMenu";
    import baseMixin from "@/mixins/BaseMixin";
    import config from "../Config"

    export default {
        name: "DetailList",
        mixins: [baseMixin, config],
        data() {
            return {
                newFlag: false,
                argument: {},
                detailData: {},
                selectData: [],
                menuData: [
                    {label: this.$t('config.general'), index: "2"},
                    {label: "ID/分类", index: "3"},
                    {label: "UOM", index: "4"},
                ],
                detailNav: "1",
                componentConfig: [
                    {
                        name: "Table",
                        label: "table",
                        component: () => import('./page/Table.vue')
                    },
                    {
                        name: "itemdetail_detail",
                        label: this.$t('config.general'),
                        component: () => import('./page/itemdetail_detail.vue')
                    },
                    {
                        name: "itemgroup_adress",
                        label: "ID/分类",
                        component: () => import('./page/itemgroup_adress.vue')
                    },
                    {
                        name: "itemgroup_uom",
                        label: "UOM",
                        component: () => import('./page/itemgroup_uom.vue')
                    },
                    {
                        name: "UomDetail_detail",
                        label: "",
                        component: () => import('./page/UomDetail_detail.vue')
                    },
                ],
                detailSelectData: {}
            }
        },
        computed: {
            btnConfig() {
                if (this.$store.state.newFlag) {
                    return []
                } else if (this.detailNav == 1) {
                    return [
                        {
                            label: "添加", type: "table", certigier: !this.btnPermNameList.includes('EN03010606'),  invalid: "po", tableConfig: [
                                {
                                    label: this.$t('bill.customer'),
                                    prop: "cust_code",
                                    input: "input",
                                },
                                {
                                    label: this.$t('config.sku'),
                                    prop: "item",
                                    input: "input",
                                },
                                {
                                    label: this.$t('common.desc'),
                                    prop: "item_desc",
                                    input: "input",
                                },
                                {
                                    label: this.$t('config.packaging'),
                                    prop: "pkg",
                                    input: "input",
                                },
                            ]
                        },
                        {label: this.$t('common.delete'), certigier: this.deleteStatus||!this.btnPermNameList.includes('EN03010608'), disabled: true, invalid: "del"},
                        {label: this.$t('common.export'), certigier: this.detailDownStatus||!this.btnPermNameList.includes('EN03010609'), disabled: true, invalid: "exportFill"},
                    ]
                } else if (this.detailNav == 4) {
                    return [
                        {label: this.$t('common.create'), certigier: this.uomDownStatus||!this.btnPermNameList.includes('EN03010607'), disabled: true, invalid: "addDetail"},
                        {label: this.$t('common.delete'), certigier: this.deleteUomStatus||!this.btnPermNameList.includes('EN03010608'), disabled: true, invalid: "delDetail"},
                        {label: this.$t('common.return'), certigier: !this.btnPermNameList.includes('EN03010610'), invalid: "backList"},
                    ]
                } else {
                    return [
                        {label: this.$t('common.return'), certigier: !this.btnPermNameList.includes('EN03010610'), invalid: "backList"},
                    ]
                }
            },
            currentComponent() {
                return this.componentConfig[this.detailNav - 1].component;
            }
        },
        methods: {
            async btnTableData(page, date, callback) {
                let url = `/queryItemFromGrpkey/${this.argument.item_group}/`;

                try {
                    let res = await this.$api.post(`${url}${page}`, {});
                    callback(res);
                } catch (e) {
                    this.$message.error(e);
                }
            },
            async exportFill(data) {
                try {
                    let res = await this.$api.post('/downItemGrpkey', data, {responseType: 'blob'})
                    if (window.navigator.msSaveBlob) {
                        var blobObject = new Blob([res.data]);
                        window.navigator.msSaveBlob(blobObject, 'itemgrpkey.xls');
                    } else {
                        var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'});
                        var filename = 'itemgrpkey.xls';
                        var downloadElement = document.createElement('a');
                        var href = window.URL.createObjectURL(blob); //创建下载的链接
                        downloadElement.style.display = 'none';
                        downloadElement.href = href;
                        downloadElement.download = filename; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(href); //释放掉blob对象
                    }
                } catch (e) {
                    this.$message.error(e);
                }
            },
            //删除数据
            async del(data) {
                try {
                    let res = await this.$api.post(`/deleteItemGroupDetail/${this.$store.state.wms}`, data);
                    
                        this.$message.success(res.returnMgr);
                        this.$children[1].getTableData(1, {})
                    
                } catch (e) {
                    this.$message.error(e);
                } finally {
                    this.$children[1].$refs.table.delSelectData(data);
                }
            },
            //选中的数据
            setSelectData(data) {
                this.selectData = data;
            },
            //返回试图
            backList() {
                if (this.detailNav == "5") {
                    this.detailNav = "4";
                } else {
                    this.detailNav = "1";
                }
                this.selectData = [];
            },
            //新建
            async newCreate(data) {
                let arr = [];
                arr.push(data);
                try {
                    let res = await this.$api.post(`/insertItemGrpkey/${this.argument.item_group}`, arr);
                    
                        this.$message.success(res.returnMgr);
                        this.$children[1].getTableData(1, {})
                    
                } catch (e) {
                    this.$message.error(e)
                }
            },
            //导航值
            setMentActive(key) {
                this.detailNav = key;
            },
            async setdialog(data, type) {
                if (type == "detail") {
                    this.detailNav = "5";
                } else {
                    this.detailSelectData = data;
                    try {
                        let res = await this.$api.get(`/queryItemGroupDetailByCode/${this.$store.state.wms}/${this.argument.item_group}/${data.cust_code}/${data.item}`);
                        
                            this.detailData = res.bean;
                            this.detailNav = "2";
                        
                    } catch (e) {
                        this.$message.error(e);
                    }
                }

            }
        },
        mounted() {
            
            this.newFlag = this.$store.state.newFlag;
            if (this.newFlag) {

            } else if (Object.keys(this.$store.state.skip).length !== 0) {
                let data = this.$store.state.skip;
                this.argument = data.routeData;
                this.detailData = data.detailList;
                this.detailNav = data.detailListNav;
            } else {
                this.argument = this.$store.state.routeData;
            }

        },
        components: {
            "v-tableTitle": tableTitle,
            "v-navMenu": navMenu,
        },
        watch: {
            selectData(data) {
                if (this.permissionStatus) {
                    if (data.length > 0) {
                        this.deleteStatus = this.detailDownStatus = false;
                        this.deleteUomStatus = this.uomDownStatus = false;
                    } else {
                        this.deleteStatus = this.detailDownStatus = true;
                        this.deleteUomStatus = this.uomDownStatus = true;
                    }
                }
            }
        }
    }
</script>

<style>

</style>
